<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作文件</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
    <div class="container">
        <form>
            <input type="file" class="form-control hidden" id="btn_file" multiple>
            <input type="button" value="选择文件" class="btn btn-success" id="btn_select">
            <div class="list-group" id="ul_list">
                <!--待追加数据位置-->
            </div>
        </form>
    </div>
</body>
<script>
    (function(){
        var btn_file = document.querySelector("#btn_file");
        var btn_select = document.querySelector("#btn_select");
        var ul_list = document.querySelector("#ul_list");
        //利用“hidden”类将文件输入框隐藏，当点击“选择文件按钮时”，调用选择文件按钮，选择文件，
        // 因为input type="file"这个无法修改样式，把它隐藏，点击其它按钮时，在其它按钮中调用点击上传文件
        btn_select.addEventListener("click",function(){
           btn_file.click();
        })

        //选择文件完成后（即文件内容发生改变后）
        btn_file.addEventListener("change",function(e){
            var files = btn_file.files;  //获取所有文件，并遍历
            for(var i=0;i<files.length;i++){
                console.log(files[i]);
                var liem = document.createElement("li");
                liem.setAttribute("class","list-group-item");
                liem.innerHTML = ' <h4 class="list-group-item-heading">'+files[i].name+'</h4>'+
                    '<p class="list-group-item-text">'+files[i].lastModifiedDate.toLocaleTimeString()+' '+(files[i].size/1024).toFixed(2)+'kb</p>'
                ul_list.appendChild(liem);
            }
        })

        if (navigator.onLine)
            console.log('online');
        else
            console.log('offline');
    })()
</script>
</html>